<template>
  <div class="goodslist">
    <myheader></myheader>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :offset="5"
    >
      <!-- 商品 -->
      <van-grid :border="true" :column-num="2" :gutter="5">
        <!-- <van-grid :border="false" :column-num="2"> -->
        <van-grid-item
          v-for="item in goodsList"
          :key="item.id"
          @click.native="$router.push({ path: `/GoodsDetial/${item.id}` })"
        >
          <van-image :src="item.img_url" />
          <!-- 商品名称标题 -->
          <div class="van-multi-ellipsis--l2">
            {{ item.title }}
          </div>
          <div class="goodsprice">
            <!-- 商品价格 -->
            <div>
              <span class="sell">¥{{ item.sell_price }}</span>
              <span class="market">¥{{ item.market_price }}</span>
            </div>
            <!-- 热卖、数量 -->
            <div class="hotsell">
              <span>热卖中</span>
              <span>剩{{ item.stock_quantity }}件</span>
            </div>
          </div>
        </van-grid-item>
      </van-grid>
    </van-list>
  </div>
</template>

<script>
import myheader from "@/components/myheader";
import { getGoodsList } from "@/apis/goods";
export default {
  components: {
    myheader,
  },
  data() {
    return {
      goodsList: [],
      //   商品列表页码
      pageindex: 1,
      // 是否正在加载数据
      loading: false,
      //是否已经全部加载完毕
      finished: false,
    };
  },
  mounted() {
    // getGoodsList({ pageindex: this.pageindex }).then((res) => {
    //   console.log(res);
    //   console.log(res.data.message);
    //   this.goodsList = res.data.message;
    // });
    this.init();
  },
  methods: {
    //   获取商品列表
    init() {
      getGoodsList({ pageindex: this.pageindex }).then((res) => {
        // console.log(res);
        // console.log(res.data.message);
        this.goodsList.push(...res.data.message);
        this.loading = false;
        if (res.data.message.length < 1) {
          this.finished = true;
        }
      });
    },
    // 加载
    onLoad() {
      this.pageindex++;
      this.init();
    },
  },
};
</script>

<style lang="less" scoped>
.myheader {
  margin-bottom: 10px;
}
.goodslist {
  padding-bottom: 50px;
  .van-multi-ellipsis--l2 {
    margin-top: 10px;
  }
  .goodsprice {
    width: 100%;
    margin-top: 10px;
    background-color: #f0f0f0;
    padding: 10px 5px 5px;
    .sell {
      color: red;
      font-weight: 700;
      margin-right: 15px;
    }
    .market {
      color: #5c5c5c;
      font-size: 14px;
      text-decoration: line-through;
    }
    .hotsell {
      margin-top: 20px;
      font-size: 14px;
      //   color: #888888;
      color: #5f5e5d;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>